<template>
  <TabLayout>
    <template #header>
      <uni-search-bar placeholder="请输入条形码、名称" @confirm="handleSearch"
                      v-model="keyword" cancelButton="none" clearButton="auto">
        <template v-slot:searchIcon>
          <uni-icons @click="handleScan" color="#999999" size="25" type="scan"/>
        </template>
      </uni-search-bar>
    </template>
    <movable-area class="h-full w-full">
      <movable-view x="30" y="1000" :out-of-bounds="false" class="z-50" direction="all">
        <uni-fab @fabClick="handleAdd"></uni-fab>
      </movable-view>
      <scroll-view scroll-y="true" @scrolltolower="handleMore" class="h-full">
        <view v-for="(item,index) in productList" :key="index" @click="handleSelect(item)">
          <ProductItem :product="item" :selected="selectedProduct" @manage="handleManage"></ProductItem>
        </view>
        <uni-load-more :status="loadMoreStatus"></uni-load-more>
      </scroll-view>
    </movable-area>


  </TabLayout>
</template>
<script setup lang="ts">

import TabLayout from "@/pages/product/components/TabLayout.vue";
import {computed, onMounted, ref} from "vue";
import api from "@/api";
import {useProductStore} from "@/store/product";
import {storeToRefs} from "pinia";
import ProductItem from "@/pages/product/product/components/ProductItem.vue";
import {onPullDownRefresh} from "@dcloudio/uni-app";

const productStore = useProductStore()
const {productList,supplierList,supplierTotal, productTotal, selectedProduct, editMode} = storeToRefs(productStore)

const loadMoreStatus = computed((() => {
  if (productTotal.value > productList.value.length) {
    return 'more'
  } else {
    return 'no-more'
  }
}))
const keyword = ref('')
const pageNo = ref(1)
const pageSize = ref(10)
const orParams = computed(() => {
  return {
    barcode: `%${keyword.value}%`,
    name: `%${keyword.value}%`
  }
})
const andParams = ref({})
const orderParams = ref({
  updatedAt: '降序'
})
onMounted(() => {
  getSupplierList()
  productList.value=[]
  getList()
})
const getList = () => {
  api.product.queryList({
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    orParams: JSON.stringify(orParams.value),
    andParams: JSON.stringify(andParams.value),
    orderParams: JSON.stringify(orderParams.value)
  }).then((res: any) => {
    let tmp:IProduct[] = res.data.data.records
    tmp.map((item:IProduct)=>{
      item.supplierName = supplierList.value.find((supplier:ISupplier)=>supplier.id===item.supplierId)?.name
    })
    productList.value = productList.value.concat(tmp)
    productTotal.value = res.data.data.total

  })
}
const handleSearch = () => {
  productTotal.value = 0
  productList.value = []
  pageNo.value = 1
  getList()
}
const handleScan = () => {
  uni.scanCode({
    scanType: ['barCode'],
    success: (res) => {
      keyword.value = res.result
      handleSearch()
    }
  })
}
const handleSelect = (item: IProduct) => {
  selectedProduct.value = item
}
const handleManage = (item: IProduct) => {
  selectedProduct.value = item
  editMode.value = 'update'
  uni.navigateTo({
    url: `/pages/product/product/productEdit`
  })
}
const handleAdd = () => {
  selectedProduct.value = <IProduct>{}
  editMode.value = 'add'
  uni.navigateTo({
    url: `/pages/product/product/productEdit`
  })
}
const handleMore = () => {
  if (productTotal.value > productList.value.length) {
    pageNo.value++
    getList()
  }
}
const getSupplierList = () => {
  api.supplier.queryList({
    pageNo: 1,
    pageSize: 99,
  }).then((res: any) => {
    supplierList.value = supplierList.value.concat(res.data.data.records)
    supplierTotal.value = res.data.data.total
  })
}
onPullDownRefresh(()=> {
  handleSearch()
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 200);
})
</script>


<style scoped>

</style>